<template>
  <div class="createPost-container">
    <el-form class="form-container" :model="form" :rules="rules" ref="refForm" label-width="100px">
      <el-form-item label="维护原因:" prop="remark">
        <el-input v-model="form.remark"/>
      </el-form-item>

      <el-form-item label="维护时间：" prop="maintainTime">
        <el-date-picker
          v-model="form.maintainTime"
          class="filter-item"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          align="right"
          unlink-panels>
        </el-date-picker>
      </el-form-item>

      <el-button v-loading="loading" style="margin-left: 10px;" type="primary"
                 @click="doSave({
                 action: 'saveForm',
                 form: {
                 name: 'refForm',
                 scrollToError: true
                 }})">确定
      </el-button>
    </el-form>
  </div>
</template>

<script>

  import {
    gameManagerMaintainSaveApi as saveApi
  } from '@/services/api/game'

  import {form} from '@/build'

  export default {
    name: 'maintain-view',

    mixins: [form],

    props: [
      'platformId',
      'maintainStartTime',
      'maintainEndTime',
      'maintainReason'
    ],

    data() {
      return {
        isIndeterminate: false,
        selectAll: false,
        form: {
          maintenId: this.platformId,
          remark: this.maintainReason,
          maintainTime: this.maintainStartTime ? [new Date(this.maintainStartTime), new Date(this.maintainEndTime)] : undefined,
        },
        rules: {
          remark: {required: true, message: '维护原因必须填写'},
          maintainTime: {type: 'array', required: true, message: '维护时间必须填写'},
        }
      }
    },

    mounted() {
      this.bindSave(saveApi, 'saveForm', 'form', {
        beforeSend: data => {
          const {maintainTime} = data;
          let startDate = undefined, endDate = undefined;
          if (!_.isUndefined(maintainTime) && _.isArray(maintainTime)) {
            startDate = maintainTime[0];
            endDate = maintainTime[1];
            data = {...data, startDate, endDate}
          } else {
            data.startDate = undefined;
            data.endDate = undefined;
          }
          return data
        },
        afterSuccess: () => {
          this.$emit('on-success');
        }
      });
    },
  }
</script>

<style lang="scss" scoped>
  .image {
    width: 100px;
    height: 100px;
  }
</style>
